<template id="wrapper">
  <el-select
    ref="multiple-selector"
    :value="value"
    :clearable="false"
    :collapse-tags="false"
    style="width:100%"
    multiple
    v-bind="$attrs"
    v-on="$listeners"
  >
    <el-input
      v-model="query"
      :clearable="true"
      class="multiple-selector-search-inputor"
      placeholder="请输入关键字查询"
      prefix-icon="el-icon-search"
      @input="onInputChange"
    />
    <div class="options-panel">
      <template v-for="item in options">
        <el-option
          :key="item.value"
          :value="item.value"
          :label="item.name || item.label"
        >
          <span class="checkbox" />
          <span class="label-name-box">{{ item.name || item.label }}</span>
        </el-option>
      </template>
    </div>
  </el-select>
</template>
<script>
import { debounce } from 'lodash';

export default {
  name: 'MultipleSelector', // 多选下拉选择
  props: {
    // eslint-disable-next-line vue/require-default-prop
    value: [String, Number, Array, Object],
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      query: '',
      minWidth: 0
    };
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    onInputChange() {
      const that = this;
      const value = this.query;
      this.debouncedOnInputChange({ that, value });
    },
    debouncedOnInputChange: debounce(({ that, value }) => {
      // 调用element-ui中的原生查询事件
      that.$refs['multiple-selector'].handleQueryChange(value);
    }, 500)
  }
};
</script>
<style lang="scss">
 .multiple-selector-search-inputor {
    position: absolute;
    z-index: 99;
    line-height: 36px;
    background-color: #FFF;
    background-image: none;
    margin-top: -6px;
    input {
      border: none !important;
      border-radius: 0px;
      border-bottom: 1px solid #DCDFE6 !important;
    }
  }
  .multiple-selector {
    .el-select-dropdown__item:nth-child(1) {
      margin-top: 24px !important;
    }
  }
</style>
<style lang="scss" scoped>
.options-panel {
  margin-top: 31px !important;
  min-height: 60px;
}
/**
* 修改下拉框多选样式，前面加复选框的样式
*/
::v-deep .el-select__tags {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 178px;
  max-height: 26px;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  top: 50%;
  margin-left: 5px;
}
::v-deep .el-select-dropdown__item {
  display: flex;
  align-items: center;
}
/*清空原来的多选框样式*/
.el-select-dropdown.is-multiple .el-select-dropdown__item:after {
  content: "" !important;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after {
  content: "" !important;
}

/*参考el-checkbox实现checkbox样式*/
.el-select-dropdown.is-multiple .el-select-dropdown__item .checkbox {
  display: inline-block;
  position: relative;
  top: 2px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  background-color: #fff;
  z-index: 1;
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .checkbox {
  background-color: #409eff;
  border-color: #409eff;
}

/*参考el-select多选对号样式实现checkbox中对号的样式*/
.el-select-dropdown.is-multiple
  .el-select-dropdown__item.selected
  .checkbox::after {
  position: absolute;
  content: "\E6DA";
  top: -10px;
  font-family: element-icons;
  font-size: 12px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  color: #fff;
}

/*设置置灰内容样式*/
.el-select-dropdown.is-multiple
  .el-select-dropdown__item.selected.is-disabled
  .checkbox {
  background-color: #f2f6fc;
  border-color: #dcdfe6;
}

.el-select-dropdown.is-multiple
  .el-select-dropdown__item.selected.is-disabled
  .checkbox::after {
  color: #c0c4cc;
}

.el-select-dropdown.is-multiple
  .el-select-dropdown__item.selected.is-disabled
  .label-name-box {
  color: #c0c4cc;
  font-weight: 400;
}
</style>
